<!-- 响应启动 -->
<template>
  <el-card style="margin-top: 20px">
    <div slot="header" class="clearfix">
      <span>响应启动</span>
    </div>
    <el-card style="margin-top: 20px">
      <el-row style="margin-top: 10px">
        <el-col :span="4">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>程序</span>
            </div>
            <div
              v-for="(item, index) in list"
              :key="index"
              class="textitem"
              :style="{
                cursor: 'pointer',
                color: currentDisposal === index ? '#038ff3' : 'initial',
                backgroundColor:
                  currentDisposal === index
                    ? 'rgb(153 153 154 / 19%)'
                    : 'initial',
              }"
              @click="addclick(index)"
            >
              <span style="margin-left: 50px"> {{ item.name }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-card
            class="box-card"
            style="margin-left: 30px; height: 239px; overflow: auto"
            v-if="currentDisposal !== -1"
          >
              <div class="zuzhi">
                <div class="zuze">工作内容</div>
                <div class="yingji">
                  <div
                    v-for="(content, contentIndex) in list[currentDisposal]
                    .responseInitiation"
                  :key="contentIndex"
                    class="xuhao"
                  >
                    <div class="wenzi">{{ contentIndex + 1 }}.</div>
                    <el-popover
                      placement="top-start"
                      width="300"
                      trigger="click"
                    >
                      <el-input
                        class="borderNone"
                        type="textarea"
                        autosize
                        size="medium"
                        resize="none"
                        v-model="content.value"
                        @input="updateContent(contentIndex)"
                      ></el-input>
                      <template slot="reference">
                        <el-input
                        :disabled="titleDisabled"
                          placeholder="请输入工作内容"
                          v-model="content.value"
                          @input="updateContent(contentIndex)"
                          class="yingjizhiz"
                        ></el-input>
                      </template>
                    </el-popover>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                        contentIndex ===
                        list[currentDisposal].responseInitiation.length - 1
                      "
                      type="primary"
                      plain
                      @click="addContent(contentIndex)"
                      >+</el-button
                    >
                  </div>
                  <div style="margin-left: 1%">
                    <el-button
                      v-if="
                        contentIndex ===
                        list[currentDisposal].responseInitiation.length - 1
                      "
                      type="danger"
                      plain
                      @click="removeContent(contentIndex)"
                      >-</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </el-card>
</template>
<script>
import {
  getLists,
  insertData,
  deletelist,
  ModifierList,
} from "../../../api/Genericmethods/GeneralQuery";
export default {
  props: ["basicInformationForm","parentPlanName","title"],
  data() {
    return {
      list: [
        {
          name: "召开应急会议",
          responseInitiation: [{ value: "" }],
        },
        {
          name: "信息上报",
          responseInitiation: [{ value: "" }],
        },
        {
          name: "资源协调",
          responseInitiation: [{ value: "" }],
        },
        {
          name: "信息公开",
          responseInitiation: [{ value: "" }],
        },
        {
          name: "后勤及财力保障",
          responseInitiation: [{ value: "" }],
        },
      ],
      currentDisposal: 0,
    };
  },
  methods: {
    xiangy() {
      getLists("EmergPlan_SpecRspMrs_RspInitiate")
        .then((data) => {
          const parenlistd = [];
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.PlanName === this.parentPlanName.PlanName) {
              parenlistd.push(element);
            }
          }
          // console.log(parenlistd, "响应启动");
          this.list = parenlistd
            .map((item) => {
              let responseInitiation = [];
              for (let i = 1; i <= 10; i++) {
                let key = "WorkContent" + i;
                if (item[key] !== null && item[key] !== "") {
                  responseInitiation.push({ value: item[key] });
                } 
                if (responseInitiation.length==0) {
                  responseInitiation.push({ value: "" });
                }
              }
              return {
                name: item.Program,
                responseInitiation: responseInitiation,
              };
            })
            .filter((item) => item.name !== null && item.name !== "");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getFormData() {
      return this.list;
    },
    addclick(index) {
      this.currentDisposal = index;
    },
    addContent(contentIndex) {
      if (this.list[this.currentDisposal].responseInitiation.length < 10) {
        this.list[this.currentDisposal].responseInitiation.push({ value: "" });
      } else {
        this.$message.error("内容数量已达到上限");
      }
      // this.list[this.currentDisposal].responseInitiation.push({ value: "" });
    },
    removeContent(contentIndex) {
      if (this.list[this.currentDisposal].responseInitiation.length > 1) {
        this.list[this.currentDisposal].responseInitiation.splice(
          contentIndex,
          1
        );
      }
    },
    updateContent(contentIndex) {
      // 可以在此处处理输入工作内容的逻辑
    },
  },
  mounted() {
    if (this.title !="添加") {
    this.xiangy();
    }
  },
   computed: {
     // 标题
    titleDisabled() {
      return this.title === "详情"; // 判断标题是否为"详情"
    },
  },
};
</script>
<style scoped lang="scss">
.textitem {
  width: 125%;
  margin-left: -20px;
  line-height: 39px;
}

.box-card1 {
  ::v-deep .el-card__body {
    padding: 0;
  }
}
::v-deep .el-card {
  overflow-x: hidden !important;
}
.borderNone ::v-deep .el-textarea__inner {
  border: none;
  height: 100%;
}.selected {
  color: #038ff3;
}

.textitem {
  cursor: pointer;
  width: 125%;
  margin-left: -20px;
  line-height: 39px;
}

.xiaozu {
  width: 1390px;
  display: flex;
  font-size: 14px;
  color: #606266;
  line-height: 36px;
  font-weight: 700;
}

.zuzhang {
  width: 500px;
  display: flex;
}

.input {
  margin-left: 25px;
}
.borderNone ::v-deep .el-textarea__inner {
  border: none;
  height: 100%;
}
.zuzhi {
  display: flex;
  width: 1394px;
}
.zuze {
  line-height: 36px;
  font-size: 15px;
  color: #606266;
  font-weight: 700;
  width: 76px;
  margin-top: 20px;
}
.yingji {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.chengyuan {
  line-height: 36px;
  font-size: 15px;
  color: #606266;
  font-weight: 700;
  width: 91px;
}
.xuhao {
  display: flex;
  flex-wrap: wrap;
  width: 517px;
  margin-top: 20px;
}
.wenzi{
 line-height: 34px;
}
.chenginput {
  width: 372px;
}
.yingjizhiz{
   margin-left: 8px; width: 372px;
}
</style>
